<template>
    <div class="com-cnt">
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">全部</mt-tab-item>
            <mt-tab-item id="2">待付款</mt-tab-item>
            <mt-tab-item id="3">待发货</mt-tab-item>
            <mt-tab-item id="4">待收货</mt-tab-item>
        </mt-navbar>
        <!-- tab-container -->
        <mt-tab-container v-model="selected"> 
            <mt-tab-container-item id="1">
                <div class="everyOrder" v-for="everyOrder in allOrderList" @click="direct('scddDetails',everyOrder.sn)">
                    <p class="orderTit">{{new Date(everyOrder.createdDate).toLocaleDateString().replace(/\//g, "-")+ " " + new Date(everyOrder.createdDate).toTimeString().substr(0, 8)}}
                        <span v-if="everyOrder.status == 'PENDING_PAYMENT'">待付款</span>
                        <span v-else-if="everyOrder.status == 'PENDING_REVIEW'">待审核</span>
                        <span v-else-if="everyOrder.status == 'PENDING_SHIPMENT'">待发货</span>
                        <span v-else-if="everyOrder.status == 'SHIPPED'">待收货</span>
                        <span v-else-if="everyOrder.status == 'RECEIVED'">已收货</span>
                        <span v-else-if="everyOrder.status == 'COMPLETED'">已完成</span>
                        <span v-else-if="everyOrder.status == 'FAILED'">已失败</span>
                        <span v-else-if="everyOrder.status == 'CANCELED'">已取消</span>
                        <span v-else-if="everyOrder.status == 'DENIED'">已拒绝</span>
                    </p> 
                    <div class="picUl">
                        <li v-for="everyImg in everyOrder.orderItems"><img :src="everyImg.thumbnail" alt=""></li>
                    </div>
                    <div class="orderPrice">实付{{everyOrder.amount}}
                        <p v-if="everyOrder.status == 'PENDING_PAYMENT'" @click.stop="scddPay(everyOrder.sn)">继续支付</p>
                        <p v-if="everyOrder.status == 'PENDING_PAYMENT'||everyOrder.status == 'PENDING_SHIPMENT'||everyOrder.status == 'PENDING_REVIEW'">取消订单</p>
                        <p v-if="everyOrder.status == 'SHIPPED'">确认收货</p>
                        <p v-if="everyOrder.status == 'SHIPPED'" @click.stop="direct('scddWuliu',everyOrder.orderShippings[0].sn)">追踪物流</p>
                        <!-- <p v-if="everyOrder.status == 'COMPLETED'">再次购买</p> -->
                        <p v-if="everyOrder.status == 'COMPLETED'" @click.stop="directs(everyOrder.id,everyOrder.sn)">申请售后</p>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <div class="everyOrder" v-for="twoOrder in twoOrderList" @click="direct('scddDetails',twoOrder.sn)">
                    <p class="orderTit">{{new Date(twoOrder.createdDate).toLocaleDateString().replace(/\//g, "-")+ " " + new Date(twoOrder.createdDate).toTimeString().substr(0, 8)}}
                        <span v-if="twoOrder.status">待付款</span>
                    </p>
                    <div class="picUl">
                        <li v-for="twoImg in twoOrder.orderItems"><img :src="twoImg.thumbnail" alt=""></li>
                    </div>
                    <div class="orderPrice">实付{{twoOrder.amount}}
                        <p @click.stop="scddPay(twoOrder.sn)">继续支付</p>
                        <p>取消订单</p>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <div class="everyOrder" v-for="threeOrder in threeOrderList" @click="direct('scddDetails',threeOrder.sn)">
                    <p class="orderTit">{{new Date(threeOrder.createdDate).toLocaleDateString().replace(/\//g, "-")+ " " + new Date(threeOrder.createdDate).toTimeString().substr(0, 8)}}
                        <span v-if="threeOrder.status">待发货</span>
                    </p>
                    <div class="picUl">
                        <li v-for="twoImg in threeOrder.orderItems"><img :src="twoImg.thumbnail" alt=""></li>
                    </div>
                    <div class="orderPrice">实付{{threeOrder.amount}}
                        <p>取消订单</p>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="4">
                <div class="everyOrder" v-for="fourOrder in fourOrderList" @click="direct('scddDetails',fourOrder.sn)">
                    <p class="orderTit">{{new Date(fourOrder.createdDate).toLocaleDateString().replace(/\//g, "-")+ " " + new Date(fourOrder.createdDate).toTimeString().substr(0, 8)}}
                        <span v-if="fourOrder.status">待收货</span>
                    </p>
                    <div class="picUl">
                        <li v-for="twoImg in fourOrder.orderItems"><img :src="twoImg.thumbnail" alt=""></li>
                    </div>
                    <div class="orderPrice">实付{{fourOrder.amount}}
                        <p>确认收货</p>
                        <p @click.stop="direct('scddWuliu',everyOrder.orderShippings[0].sn)">追踪物流</p>
                    </div>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>
<script>
import { domain,domain2 } from "@/assets/js/config"
import axios from 'axios'
import Qs from 'qs'
import $ from "jquery"
export default {
  name: "scddPage",
  components: {},
  data() {
    return {
        phone:localStorage.getItem('phone'),
        selected: this.$route.query.status||'1',
        allOrderList:[],
        twoOrderList: [],
        threeOrderList: [],
        fourOrderList: [],
    };
  },
  mounted() {
    this.getOrder()
    this.getTwoOrder()
    this.getThreeOrder()
    this.getFourOrder()
  },
  methods: {
    direct: function (val,sn){
        this.$router.push({ path: '/' + val,query: {sn:sn} })
    },
    directs: function (id,orderSn){
        this.$router.push({ path: '/afterSailDetails',query: {'id':id,'orderSn':orderSn} })
    },
    scddPay: function(sn){
        this.$router.push({ path: '/scddPay',query: {orderSn:sn} })
    },
    //all
    getOrder: function() {
      let that = this
      axios({
        url: domain2 + "/shop/api/member/order/list",
        method: "post",
        data: Qs.stringify({ 'mobile': that.phone }),
        headers: { "Content-Type": "application/x-www-form-urlencoded" }
      }).then(res => {that.getOrderSucc(res)}).catch(err => {console.log(err)})
    },
    getOrderSucc:function(res){
        if(res.data.code === 0){
            this.allOrderList = res.data.data
        }
    },
    //2
    getTwoOrder: function() {
      let that = this
      axios({
        url: domain2 + "/shop/api/member/order/list",
        method: "post",
        data: Qs.stringify({ 'mobile': that.phone,'status':'PENDING_PAYMENT' }),
        headers: { "Content-Type": "application/x-www-form-urlencoded" }
      }).then(res => {that.getTwoOrderSucc(res)}).catch(err => {console.log(err)})
    },
    getTwoOrderSucc:function(res){
        if(res.data.code === 0){
            this.twoOrderList = res.data.data
        }
    },
    //3
    getThreeOrder: function() {
      let that = this
      axios({
        url: domain2 + "/shop/api/member/order/list",
        method: "post",
        data: Qs.stringify({ 'mobile': that.phone,'status':'PENDING_SHIPMENT' }),
        headers: { "Content-Type": "application/x-www-form-urlencoded" }
      }).then(res => {that.getThreeOrderSucc(res)}).catch(err => {console.log(err)})
    },
    getThreeOrderSucc:function(res){
        if(res.data.code === 0){
            this.threeOrderList = res.data.data
        }
    },
    //4
    getFourOrder: function() {
      let that = this
      axios({
        url: domain2 + "/shop/api/member/order/list",
        method: "post",
        data: Qs.stringify({ 'mobile': that.phone,'status':'SHIPPED' }),
        headers: { "Content-Type": "application/x-www-form-urlencoded" }
      }).then(res => {that.getFourOrderSucc(res)}).catch(err => {console.log(err)})
    },
    getFourOrderSucc:function(res){
        if(res.data.code === 0){
            this.fourOrderList = res.data.data
        }
    },
  }
};
</script>

<style lang="stylus" scoped>
.com-cnt
    width: 100%
    height: 100%
    .mint-navbar .mint-tab-item.is-selected
        margin-bottom: 0
        color: #add112
        border-bottom 0.06rem solid #aad112
    .everyOrder
        height 190px
        font-size 12px
        padding 0 12px
        color #333333
        border-bottom 12px solid #f0f0f0
        .orderTit
            height 34px
            line-height 34px
            border-bottom 1px solid #f0f0f0
            span 
                float right
        .picUl
            height 104px
            padding-top 12px
            li 
                float left
                width 80px
                height 80px
                list-style none
                img
                    width 100%
                    height 100%
        .orderPrice
            height 50px
            line-height 50px
            p 
                width 80px
                height 27px
                border 1px solid #333333
                color #333333
                line-height 27px
                text-align center
                font-size 12px
                float right
                border-radius 5px
                margin-left 12px

</style>